/*
    Author       : Mitchell Simoens
    Site         : http://simoens.org/Sencha-Projects/demos/
    Contact Info : mitchellsimoens@gmail.com
    Purpose      : Creation of a custom color picker
	
	License      : GPL v3 (http://www.gnu.org/licenses/gpl.html)
    Warranty     : none
    Price        : free
    Version      : 1.0b
    Date         : 01/09/2011
*/

Ext.ns("Ext.form.ux.touch");

Ext.form.ux.touch.LOADING_VALUE = -99999;
Ext.form.ux.touch.GenericPickerField = Ext.extend(Ext.form.Field, {
    ui: 'select',
    picker: null,
    destroyPickerOnHide: false,
	renderTpl: null,
	otherCls: "",
	displaySlot: "slotName",
	useMask: true,
	
	/**
	 * If the data of the picker will be retrieved by a ajax request this config should be true.
	 * If this config is true a Loading text shown on field. After setData is called value of the field blanked.
	 * Field status (disabled or enabled) is adjusted by this property. If true, field is disabled.
	 * 
	 * @cfg showLoading
	 */
	showLoading: false,
	
	slotTitle: 'Generic Slot Title',
	slotName: 'slotName',
	
	data : [{text: L_LOADING, value: Ext.form.ux.touch.LOADING_VALUE}],
	
	/**
	 * Sets data of the picker and rerenders picker with new data.
	 * Enables the field. 
	 * @param {Array} data
	 */
	setData: function (data){
		this.data = data;
		this.makePicker();
		this.fieldPicker = null;
		this.setDisabled(false);
		this.clear();
		//this.fieldPicker.slots[0].data = data;
		//alert('sdsd');
	},
	
   afterRender: function() {
	   Ext.form.ux.touch.GenericPickerField.superclass.afterRender.apply(this, arguments);
	   this.setDisabled(this.showLoading);
	   if(this.showLoading) {
		   var obj = {};
		   obj[this.slotName] = Ext.form.ux.touch.LOADING_VALUE;
		   this.setValue(obj);
	   }
    },
    
	initComponent: function() {
		if (this.displaySlot === null) {
			throw "Must specify a displaySlot";
		}
		this.addEvents(
			'select'
		);

		this.useMask = true;

		var renderTpl = [
			'<tpl if="label">',
				'<div class="x-form-label"><span>{label}</span></div>',
			'</tpl>',
			'<tpl if="fieldEl">',
				'<div class="x-form-field-container">',
					'<div id="{inputId}" name="{name}" class="x-form-color-picker-field '+this.otherCls+' {fieldCls}"',
						'<tpl if="style">style="{style}" </tpl> >&nbsp;',
					'</div>',
					'<tpl if="useMask"><div class="x-field-mask" style="width:100%;height:100%;"></div></tpl>',
				'</div>',
				'<tpl if="useClearIcon"><div class="x-field-clear-container"><div class="x-field-clear x-hidden-visibility">&#215;</div></div></tpl>',
			'</tpl>'
		];

		this.renderTpl = this.renderTpl || renderTpl;

		Ext.form.ux.touch.GenericPickerField.superclass.initComponent.apply(this, arguments);

		this.makePicker();
		
	},

	makePicker: function() {
		//var data = this.makeColors();

		var colorSlot = {
			name: this.slotName,
			title: this.slotTitle,
			data: this.data
		};

		var picker = {
			slots : [colorSlot]
		};

		this.picker = picker;
	},

    getPicker: function() {
        if (!this.fieldPicker) {
            if (this.picker instanceof Ext.Picker) {
                this.fieldPicker = this.picker;
            } else {
                this.fieldPicker = new Ext.Picker(Ext.apply(this.picker || {}));
            }
			
			var value = { };
			value[this.slotName] = this.value;
			
            this.fieldPicker.setValue(value);

            this.fieldPicker.on({
                scope : this,
                change: this.onPickerChange,
                hide  : this.onPickerHide
            });
        }

        return this.fieldPicker;
    },

    onMaskTap: function() {
        if (Ext.form.ux.touch.GenericPickerField.superclass.onMaskTap.apply(this, arguments) !== true) {
            return false;
        }
        
        this.getPicker().show();
    },
    
    onPickerChange : function(picker, value) {
        this.setValue(value);
        this.fireEvent('select', this, this.getValue());
    },
    
    onPickerHide: function() {
        if (this.destroyPickerOnHide && this.fieldPicker) {
            this.fieldPicker.destroy();
        }
    },

    setValue: function(value, animated) {
		if (typeof value === "string") {
			this.value = value;
		} else {
			if (value[this.slotName] === Ext.form.ux.touch.LOADING_VALUE && this.showLoading == false)
				return this;
			var name;
			for (name in value) {
				this.value = value[name];
			}
		}

        if (this.rendered && value !== "") {
			var text = this.getText();
			text = text.replace(" margin: .25em auto;", "");
			this.fieldEl.dom.innerHTML = text;
        }
        
        return this;
    },
    
    clear: function (){
    	this.value = null;
		this.fieldEl.dom.innerHTML = "";    	
    },

	getText: function() {
		var picker = this.picker;
		var slots = picker.slots;
		var slot = null;
		var value = this.value || null;
		if (value === null) {
			return null;
		}
		if (value === Ext.form.ux.touch.LOADING_VALUE && !this.showLoading) {
			return "";
		} else if (value === Ext.form.ux.touch.LOADING_VALUE && this.showLoading) {
			return "Yükleniyor";
		}

		var name = this.displaySlot;

		for (var i = 0; i < slots.length; i++) {
			var tmpSlot = slots[i];
			if (tmpSlot.name === name) {
				slot = tmpSlot;
				break ;
			}
		}
		var data = slot.data;
		var text;
		for (var i = 0; i < data.length; i++) {
			if (data[i].value === value) {
				text = data[i].text;
				break ;
			}
		}

		return text;
	},
    
	getValue: function() {
		var value = this.value || null;

		return value;
	},
    
    onDestroy: function() {
        if (this.fieldPicker) {
            this.fieldPicker.destroy();
        }
        
        Ext.form.ux.touch.GenericPickerField.superclass.onDestroy.call(this);
    }
});

Ext.reg("genericpickerfield", Ext.form.ux.touch.GenericPickerField);